import { useDraggable } from '@dnd-kit/core';
import { useState } from 'react';
let style
export function Draggable(props) {
  // 每拖动一次，就会重新渲染（点击也会）
  // transform可能为null，是一个对象 x y scaleX scaleY，每次移动都会更新（因为组件重新渲染）
  // 只在鼠标按下、移动的时候，transform有值，初始渲染以及鼠标松开为null，记录的是偏移量
  const { attributes, listeners, setNodeRef, transform } = useDraggable({
    id: 'draggable',
  });
  // 想要拖动，必须设置transform的样式，否则还是在原地（本质监听的其实是鼠标的位置，transform只是让元素跟着鼠标）
  transform && (style = {
    ...style,
    transform: `translate(${props.prev.x + transform.x}px, ${props.prev.y + transform.y}px)`,
  })
  // 添加了red的元素，到时候拖动的时候是内部的整个都被拖动，但是拖动的区域是可以自定义的，
  // 比如这里，拖动的区域是button，而不是div，通过 {...listeners} {...attributes}来设置,可以多个
  // HACK 添加touch-action:none，防止一些滚动
  return (
    <div ref={setNodeRef} style={style} touch-action="none">
      {props.children}
      <div role="button" style={{ backgroundColor: 'blue',width:'fit-content' }} {...listeners} {...attributes}>1</div>
      <button>2</button>
    </div>
  );
}